<template>
  <div id="voucher">
    <div class="vocher-tip">
      <p class="vocher-tip-1">使用“一码通”做为办事凭证的场景</p>
      <a-row class="vocher-row">
        <a-col span="4">
          场景描述：
        </a-col>
        <a-col span="15">
          第三方网站模拟经办系统，点击“扫码”，等待用户展码。用户打开载体APP，进入一码通H5页面，出示二维码，扣在扫码墩上。第三方网站获取用户信息，显示“参保人姓名和身份证号码”
        </a-col>
      </a-row>
    </div>
    <div class="voucher-scene">
      <a-row class="voucher-scene-row">
        <a-col span="3">
          <p>服务事项：</p>
        </a-col>
        <a-col span="10">
          <p>企业养老待遇续发</p>
        </a-col>
      </a-row>
      <a-row type="flex" align="middle" class="voucher-scene-row">
        <a-col span="9">
          <a-row>
            <a-col span="8">
              <p>参保人姓名：</p>
            </a-col>
            <a-col span="16">
              <a-input style="color: #d81e06;" v-model="info.idcard" disabled placeholder="扫码完成显示参保人姓名"></a-input>
            </a-col>
          </a-row>

          <a-row class="voucher-scene-row">
            <a-col span="8">
              <p>身份证号码：</p>
            </a-col>
            <a-col span="16">
              <a-input style="color: #d81e06;" v-model="info.name" disabled placeholder="扫码完成显示参保人身份证号码"></a-input>
            </a-col>
          </a-row>
        </a-col>
        <a-col span="12" offset="1">
          <a-button @click="voucher" style="background: #1890ff;color: #fff;border-radius: 5px;height: 50px;font-size: 16px;">扫码获取人员凭证</a-button>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import ACol from "ant-design-vue/es/grid/Col";
export default {
  components: { ACol },
  data() {
    return {
      authCode: "",
      info: {
        idcard: "",
        name: ""
      }
    };
  },
  mounted() {
    this.initData();
    // this.$refs.code.focus();
  },
  destroyed() {
    sessionStorage.removeItem("voucher_info");
  },
  methods: {
    initData() {
      let res = sessionStorage.getItem("voucher_info");
      this.info = res ? JSON.parse(res) : { idcard: "", name: "" };
    },
    voucher() {
      this.$router.push("/voucher/result");
    }
  }
};
</script>

<style lang="less" scoped>
#voucher {
}
.vocher-tip {
  margin: 80px 40px 20px 55px;

  .vocher-tip-1{
    font-size: 25px;
    font-weight: 600;
    color: #333;
    font-family: AlibabaPuHuiTiM;
  }

  .vocher-row {
    margin: 35px 0;
    font-size: 16px;
    color: #333;
    line-height: 28px;
  }
}

.voucher-scene {
  margin: 15px 25px;
  background: #dbdbdb;
  padding: 25px 18px;

  .voucher-scene-row {
    padding: 8px 0;
    font-size: 16px;
    color: #333;
  }
}
p {
  padding: 0;
  margin: 0;
}
</style>
